<template>
    <div class="myHeader">
        <div>
            <span>ToDoList</span>
            <input type="text" placeholder="添加todo" v-model="content" @keyup.enter="addTask"/>
        </div>
    </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
export default {
    name: 'myHeader',

    setup() {
        let store = useStore()
        // console.log(store);
        let content = ref('')
        // console.log(content);
        return {
            content,
            addTask: computed(() => store.commit('addTask', content.value))
        }
    }
}
</script>

<style scoped lang="scss">
.myHeader {
    width: 100%;
    height: 50px;
    background-color: rgba(47,47,47,0.98);
    color: #fff;
    div {
        width: 600px;
        margin: 0 auto;
        display: flex;
        height: 100%;
        justify-content: space-between;
        align-items: center;
        span {
        font-size: 26px;}
        input {
            border: none;
            outline: none;
            width: 60%;
            border-radius: 6px;
            height: 30px;
            padding-left: 10px;
        }
    }
}
</style>